<template>
  <el-card class="data-view-full-page data-view-el-card h-100p">  
    <div v-if="!editWidget" class="h-100p">
      <div class="pad-lr-20 lh-40 bor-b dv-header">
        <div class="fts-14 lh-40 h-40 text-right">
          <template v-if="mode == 'design'">
            <span @click="toggleConfigView" class="mar-l-10"><i class="el-icon-setting fts-14"></i> 配置视图</span>
            <span @click="addWidget" class="mar-l-10"><i class="el-icon-circle-plus-outline fts-14"></i> 添加部件</span>
            <span @click="changeMode('browse')" class="mar-l-10"><i class="el-icon-document-checked fts-14"></i> 保存修改</span>
            <span @click="changeMode('browse')" class="mar-l-10"><i class="el-icon-document-delete fts-14"></i> 放弃修改</span>
          </template>
          <template v-if="mode == 'browse'">
            <span @click="changeMode('design')" class="mar-l-10"><i class="el-icon-edit-outline fts-14"></i> 编辑</span>
            <span @click="cancel" class="mar-l-10"><i class="el-icon-close fts-14"></i> 退出</span>
          </template>
        </div>
      </div> 
      <el-container>
        <el-main class="h-100p">
          <grid-layout
            :layout.sync="layout"
            :col-num="12"
            :row-height="30"
            :is-draggable="true"
            :is-resizable="true"
            :is-mirrored="false"
            :vertical-compact="true"
            :margin="[10, 10]"
            :use-css-transforms="true"
          >
            <grid-item 
              v-for="(item , index) in layout"
              :x="item.x"
              :y="item.y"
              :w="item.w"
              :h="item.h"
              :i="index"
              :key="index + ''"
            >
              <rs-widget :widget="item"></rs-widget>
            </grid-item>
          </grid-layout>
        </el-main>
        <el-aside class="bor-l" v-if="editViewConfig">
          <div class="bor-b lh-40 pad-lr-20">配置视图 <span class="pull-right">
            <el-tooltip class="item" effect="dark" content="保存并关闭" :open-delay="1500" placement="left-start">
              <i @click="toggleConfigView" class="el-icon-close fts-14"></i>
            </el-tooltip></span></div>
        </el-aside>
      </el-container>
    </div>
    <widget-design v-if="editWidget" @save="widgetDesignSave" @cancel="widgetDesignCancel" :_widgetTypes="widgetTypes" :_widget="currentWidget" :_dataSources="dataSources"></widget-design>
  </el-card>
</template>
<script>
import VueGridLayout from 'vue-grid-layout';
import WidgetDesign from './design/design-widget.vue';
import RsWidget from './widget';
import widgetTypes from '../widgetTypes';

import { redashService } from '../../../api/datav';

export default {
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    'widget-design': WidgetDesign,
    'rs-widget': RsWidget
  },
  data(){
    return {
      mode: 'browse',
      layout: [],
      editViewConfig: false,
      editWidget: false,
      currentWidget: null,
      editIndex: -1,
      dataSources: [],
      widgetTypes: widgetTypes
    }
  },
  mounted(){
    redashService.getDataSources().then(
      res => {
        if(res['data']){
          this.dataSources = res['data'] || [];
        }
      }
    )
  },
  methods: {
    changeMode(mode){
      this.mode = mode;
    },
    cancel(){
      this.$emit('cancel' , null);
    },
    toggleConfigView(){
      this.editViewConfig = !this.editViewConfig;
    },
    addWidget(){
      this.editWidget = true;
      this.currentWidget = null;
    },
    widgetDesignCancel(){
      this.editWidget = false;
    },
    widgetDesignSave(widget){
      console.log(widget);
      if(this.currentWidget === null){
        // let widgetJson = JSON.parse(JSON.stringify(widget));
        this.layout.push(widget);
      }else{
        this.layout[this.editIndex] = widget;
      }
      this.widgetDesignCancel();
    }
  }
}
</script>
<style lang="scss">

.data-view-full-page{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.data-view-el-card{
  .el-header{
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #DCDFE6;
  }
  .dv-header{
    span{
      cursor: pointer;
      &:hover{
        color: royalblue;
      }
    }
  }
  .el-card__body{
    height: 100%;
    box-sizing: border-box;
    padding: 0px !important;
    height: 100%;
  }
  .el-container{
    height: calc(100% - 45px);
  }
  .elc-aside-right{
    border-left: 1px solid #DCDFE6;
  }
  .elc-aside-left{
    border-right: 1px solid #DCDFE6;
  }
}
</style>